<template>
  <div class="message_box">
    <div class="top">
      <div class="xinxi">
        <img :src="imgUrl" alt="" class="用户头像" />
        <span class="yhm">{{ Name }}</span>
      </div>
      <textarea v-model="txt"></textarea>
      <div class="btn">
        <button class="publish" @click="publish">点击发表</button>
      </div>
    </div>
    <div class="down">
      <div class="message" v-for="item of datas" :key = item>
        <img :src="item.Admin.userimg" alt="">
        <div>
          <span>{{item.Admin.userName}}</span><span>{{item.time}}</span>
          <div>{{item.userMessage}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import axios from "../axios/index";
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
//用户信息
let imgUrl = ref(require("../assets/img/mrtx.webp"));
let Name = ref("");

let datas = ref("")
//多行文本域的数据
let txt = ref("");
let id = window.localStorage.getItem("id");
//获取用户信息的函数
async function getUser() {
  if (id) {
    let { data } = await axios.get(`/admin/getYhm?userID=${id}`);
    imgUrl.value = data.userimg;
    Name.value = data.userName;
  }
}
getUser();

//发布留言的点击事件
async function publish() {
  if (!txt.value) {
    ElMessage({
      message: "留言不能为空",
      type: "warning",
    });
    return;
  } else if (!id) {
    ElMessage({
      message: "请登录以后在发表留言",
      type: "warning",
    });
    txt.value = "";
    return;
  } else if (id) {
    let { data } = await axios.get(`/message/addMessage?AdminId=${id}&userMessage=${txt.value}&time=${getNowTime()}`)
    datas.value = data
  }
}

//初始化界面
async function init(){
    let {data} = await axios.get("/message/getYhly")
    datas.value = data
}
init()

//获取当前时间
function getNowTime() {
  var date = new Date();
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();
  var hour = date.getHours();
  var minute = date.getMinutes();
  var second = date.getSeconds();
  var time =
    year +
    "-" +
    addZero(month) +
    "-" +
    addZero(day) +
    " " +
    addZero(hour) +
    ":" +
    addZero(minute) +
    ":" +
    addZero(second);
  return time;
}

function addZero(s) {
  return s < 10 ? "0" + s : s;
}
</script>

<style scoped lang="less">
.message_box {
  width: 15.2rem;
  left: 3rem;
  margin-top: 0.4rem;

  .top {
    overflow: hidden;
    width: 15.2rem;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 0.12rem;

    .xinxi {
      height: 1rem;
      display: flex;
      align-items: center;
      margin: 0.4rem 0 0 1rem;

      img {
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 50%;
      }

      span {
        font-size: 0.24rem;
        margin-left: 0.4rem;
        color: rgba(156, 189, 248, 1);
      }
    }

    textarea {
      min-width: 13.2rem;
      max-width: 13.2rem;
      min-height: 2rem;
      max-height: 4rem;
      text-indent: 0.24rem;
      margin-left: 1rem;
      background-color: rgba(255, 255, 255, 0.8);
      outline-style: none;
      border-radius: 0.12rem;
      border: 0.01rem solid rgba(156, 189, 248, 1);
      color: rgba(156, 189, 248, 1);
      font-weight: 700;
      font-size: 0.2rem;
    }

    .btn {
      width: 13.2rem;
      margin: auto;
      display: flex;
      justify-content: flex-end;
      padding-bottom: 0.4rem;

      button {
        border: none;
        background-color: rgba(156, 189, 248, 1);
        width: 1rem;
        height: 0.4rem;
        border-radius: 0.06rem;
        color: white;
      }
    }
  }

  .down {
    overflow: hidden;
    width: 15.2rem;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 0.12rem;
    margin-top: 0.8rem;

    .message {
      width: 13.2rem;
      margin: 0.2rem auto;
      display: flex;
      align-items: flex-start;
      padding: 0.2rem 0;
      border-bottom: 0.01rem dashed #aaa;

      img {
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 50%;
      }

      div {
        font-size: 0.2rem;

        span {
          display: inline-block;
          height: 0.3rem;
          padding: 0 0.2rem;
          line-height: 0.3rem;
          font-weight: 700;
          color: rgba(156, 190, 248, 1);
        }

        div {
          text-indent: 0.2rem;
          padding: 0 0.2rem;
          font-size: 0.16rem;
          color: #777;
        }
      }
    }
  }
}
</style>
